import React from 'react'
/*
state 等价于vue的data
react是单向数据流，单向数据绑定，不能直接修改state
setState（）修改state
*/
// 函数组建写dom ，逻辑处理class组建
class App extends React.Component {
    constructor() {
        super()
        //state数据存放的地方
        this.state = {
            input: '',
            list: ['1.今天天气不错', '2.今天是愚人节'],
            end: []
        }
    }
    //给input副之
    changeInput = (event) => {
        // 数据是单向的，所以input的值需要手动赋值
        this.setState({
            input: event.target.value
        })
    }
    //点击按钮向数组中插入一条
    pushList = () => {
        if (!this.state.input) return alert("不能为空")
        // react里state不能直接修改，会报错
        this.setState({
            list: [...this.state.list, this.state.input],
            input: ''
        })
    }


    // 从进行中向已完成列表里插入
    listPushEnd = (index) => {
        // 不能直接修改state，但是能够给state里的之赋予提个新的变量
        let list = this.state.list;
        const item = list.splice(index, 1)
        this.setState({
            list,
            // 合并
            end: [...this.state.end, ...item]
        })
        console.log(item, list)
    }

    //从已完成的向进行中的列表中插入
    endPushLish = (index) => {
        let end = this.state.end;
        let item = end.splice(index,1)
        this.setState({
            end,
            list:[...this.state.list,...item]
        })
    }


    render() {
        //结构
        const { list, input, end } = this.state;
        return <>
            {/* 头部输入框 */}
            <header>
                <section>
                    <input type="text" onChange={this.changeInput} value={input} />
                    <button onClick={this.pushList}>添加</button>
                </section>
            </header>
            {/* 进行中的面板 */}
            <ul>
                <li>正在进行的任务：{list.length}条</li>
                {
                    // arr的map方法：在不修改原数组的情况下返回新数组
                    list.map((item, index, arr) => {
                        // 循环体里的直接元素上加key
                        return <li onClick={() => this.listPushEnd(index)} key={index}>
                            {item}
                        </li>
                    })
                }
            </ul>
            {/* 已完成的面板 */}
            <ul>
                <li>已经完成的任务{end.length}条</li>
                {
                    end.map((item, index) => {
                        //使用箭头函数不要用直接用function
                        return <li onClick={() => this.endPushLish(index)} key={index}>{item}</li>
                    })
                }
            </ul>
        </>
    }
    // 把英语转乘副科，体育成主客
}
export default App;